<template>
  <div class="main">
    <div class="bl1">
      <p class="tit">历史空气质量分析</p>
      <div>
        <div id="schart1"></div>
        <div id="schart0"></div>
        <div class="huanBaoRR">
          <p class="title1">空气质量</p>
          <div>
            <p>普通污染物</p>
            <p class="redT">PM2.5</p>
          </div>
          <div>
            <p>空气质量等级</p>
            <p class="redT">{{ tianqi.air_level }}</p>
          </div>
        </div>
        <div class="huanBaoR">
          <p class="title1">主要污染物</p>
          <div>
            <p style="font-size: 16px; line-height: 20px; text-align: left">
              PM2.5
            </p>
            <p
              style="
                font-size: 12px;
                color: #ffffff;
                width: 60px;
                text-align: left;
                line-height: 20px;
              "
            >
              {{ tianqi.pm25
              }}<span class="float_right">{{ tianqi.pm25_desc }}</span>
            </p>
            <el-progress
              :text-inside="true"
              :show-text="false"
              :stroke-width="10"
              :percentage="tianqi.pm25"
            ></el-progress>
          </div>
          <div>
            <p style="font-size: 16px; line-height: 20px; text-align: left">
              PM10
            </p>
            <p
              style="
                font-size: 12px;
                color: #ffffff;
                width: 60px;
                text-align: left;
                line-height: 20px;
              "
            >
              {{ tianqi.pm10
              }}<span class="float_right">{{ tianqi.pm10_desc }}</span>
            </p>
            <el-progress
              :text-inside="true"
              :show-text="false"
              :stroke-width="10"
              :percentage="tianqi.pm10"
            ></el-progress>
          </div>
          <div>
            <p style="font-size: 16px; line-height: 20px; text-align: left">
              O3
            </p>
            <p
              style="
                font-size: 12px;
                color: #ffffff;
                width: 60px;
                text-align: left;
                line-height: 20px;
              "
            >
              {{ tianqi.o3
              }}<span class="float_right">{{ tianqi.o3_desc }}</span>
            </p>
            <el-progress
              :text-inside="true"
              :show-text="false"
              :stroke-width="10"
              :percentage="tianqi.o3"
            ></el-progress>
          </div>
          <div>
            <p style="font-size: 16px; line-height: 20px; text-align: left">
              NO2
            </p>
            <p
              style="
                font-size: 12px;
                color: #ffffff;
                width: 60px;
                text-align: left;
                line-height: 20px;
              "
            >
              {{ tianqi.no2
              }}<span class="float_right">{{ tianqi.no2_desc }}</span>
            </p>
            <el-progress
              :text-inside="true"
              :show-text="false"
              :stroke-width="10"
              :percentage="tianqi.no2"
            ></el-progress>
          </div>
          <div>
            <p style="font-size: 16px; line-height: 20px; text-align: left">
              SO2
            </p>
            <p
              style="
                font-size: 12px;
                color: #ffffff;
                width: 60px;
                text-align: left;
                line-height: 20px;
              "
            >
              {{ tianqi.so2
              }}<span class="float_right">{{ tianqi.so2_desc }}</span>
            </p>
            <el-progress
              :text-inside="true"
              :show-text="false"
              :stroke-width="10"
              :percentage="tianqi.so2"
            ></el-progress>
          </div>
        </div>
      </div>
    </div>
    <div class="bl2">
      <p class="tit">实时数据分析</p>
      <div>
        <div class="blc" v-for="(item, index) in analysis" :key="index">
          <img :src="item.src" width="36" height="36" alt="" />
          <div>
            <p class="text1">{{ item.name }}</p>
            <p class="text2">{{ item.number }}</p>
          </div>
        </div>
      </div>
    </div>
    <div class="bl1">
      <p class="tit">环境因子趋势分析</p>
      <div id="schart3"></div>
    </div>
    <div class="bl2">
      <p class="tit">天气预报</p>

      <iframe
        scrolling="no"
        src="https://tianqiapi.com/api.php?cityid=101220101&city=合肥&style=tp&skin=sogou&color=FFFFFF&paddingleft=0"
        frameborder="0"
        width="200"
        height="260"
        allowtransparency="true"
        style="margin-left: 40px"
      ></iframe>
      <iframe
        scrolling="no"
        src="https://tianqiapi.com/api.php?cityid=101220101&city=合肥&style=ts&skin=sogou&color=FFFFFF&paddingleft=20"
        frameborder="0"
        width="450"
        height="220"
        style="margin-left: 40px"
      ></iframe>
    </div>
  </div>
</template>
<script>
import echarts from "echarts";

export default {
  data() {
    return {
      analysis: [
        {
          src:
            "",
          name: "PM10",
          number: "79ug/m³",
        },
        {
          src:
            "",
          name: "PM2.5",
          number: "19ug/m³",
        },
        {
          src:
            "",
          name: "温度",
          number: "19℃",
        },
        {
          src:
            "",
          name: "湿度",
          number: "79ug/m³",
        },
        {
          src:
            "",
          name: "TSP",
          number: "79ug/m³",
        },
        {
          src:
            "",
          name: "二氧化硫",
          number: "79ug/m³",
        },
        {
          src:
            "",
          name: "二氧化碳",
          number: "ug/m³",
        },
        {
          src:
            "",
          name: "风力",
          number: "79ug/m³",
        },
        {
          src:
            "",
          name: "风速",
          number: "79ug/m³",
        },
        {
          src:
            "",
          name: "风向",
          number: "79ug/m³",
        },
        {
          src:
            "",
          name: "大气压",
          number: "79ug/m³",
        },
        {
          src:
            "",
          name: "臭氧",
          number: "--",
        },
        {
          src:
            "",
          name: "光照",
          number: "--",
        },
        {
          src:
            "",
          name: "一氧化碳",
          number: "--",
        },
        {
          src:
            "",
          name: "噪音",
          number: "79ug/m³",
        },
      ],
      tq9: "",
      tq3: "",
      tianqi: {},
    };
  },
  created() {},
  mounted() {
    this.getM();
    this.schart1();
  },
  methods: {
    getM() {
      this.$api
        .EnvironmentHJFX({ user_id: localStorage.getItem("user_id") })
        .then((res) => {
          var data1 = res.data.map((a) => a.datatime);
          var data2 = res.data.map((a) => a.pm25);
          var data3 = res.data.map((a) => a.pm10);
          var data4 = res.data.map((a) => a.tsp);
          let myChart3 = echarts.init(document.getElementById("schart3"));
          let options3 = {
            // backgroundColor: 'rgba(240,240,240,1)',
            title: {
              // text: '人员管理趋势图', //主标题
              textStyle: {
                color: "#000", //颜色
                fontStyle: "normal", //风格
                fontWeight: "400", //粗细
                fontFamily: "Microsoft yahei", //字体
                fontSize: 22, //大小
                align: "center", //水平对齐
              },
              // subtext:'副标题',      //副标题
              // subtextStyle:{          //对应样式
              //     color:'#F27CDE',
              //     fontSize:14
              // },
              itemGap: 7,
            },
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "shadow",
                label: {
                  backgroundColor: "#6a7985",
                },
              },
            },
            legend: {
              textStyle: {
                color: "#fff", //颜色
                fontStyle: "normal", //风格
                fontWeight: "400", //粗细
                fontFamily: "Microsoft yahei", //字体
                fontSize: 18, //大小
                align: "center", //水平对齐
              },
              data: ["PM2.5", "PM10", "TSP"],
            },

            grid: {
              left: "2%",
              right: "5%",
              bottom: "3%",
              containLabel: true,
            },
            xAxis: [
              {
                axisLine: {
                  lineStyle: { color: "rgb(250,250,250)" }, // x轴坐标轴颜色
                },

                axisLabel: {
                  color: "#fff",
                  formatter: "{value}", //单位
                  show: true,
                  textStyle: {
                    color: "#c3dbff", //更改坐标轴文字颜色
                    fontSize: 14, //更改坐标轴文字大小
                    fontWeight: 500,
                  },
                },
                name: "时间点",
                type: "category",
                boundaryGap: false,
                data: data1,
              },
            ],
            yAxis: [
              {
                axisLine: {
                  lineStyle: { color: "rgb(250,250,250)" }, // x轴坐标轴颜色
                },
                axisLabel: {
                  lineStyle: { color: "rgb(250,250,250)" }, // x轴坐标轴颜色
                  formatter: "{value}", //单位
                  show: true,
                  textStyle: {
                    color: "#c3dbff", //更改坐标轴文字颜色
                    fontSize: 14, //更改坐标轴文字大小
                    fontWeight: 500,
                  },
                },
                name: "值ug/m³",
                type: "value",
              },
            ],
            series: [
              {
                name: "PM2.5",
                type: "line",
                stack: "总量",
                smooth: true,
                symbol: "circle",

                symbolSize: 8, //拐点圆的大小
                color: ["#44b9f6"], //折线条的颜色
                data: data3,
                areaStyle: {
                  // type: 'default',
                  // color:'#70eeff'
                  normal: {
                    //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      {
                        offset: 0,
                        color: "#44b9f6",
                      },
                      {
                        offset: 0.5,
                        color: "#73edff",
                      },
                      {
                        offset: 1,
                        color: "#f0f7ff",
                      },
                    ]),
                  },
                },
                itemStyle: {
                  normal: {
                    borderWidth: 4,
                    color: "#296aff", // 会设置点和线的颜色，所以需要下面定制 line
                    borderColor: "#7be7ff", // 点边线的颜色
                  },
                },
                lineStyle: { color: "#65bfff" },
              },
              {
                name: "PM10",
                type: "line",
                stack: "总量",
                smooth: true,
                symbol: "circle",
                symbolSize: 8, //拐点圆的大小
                color: ["#E6A23C"], //折线条的颜色

                data: data2,
                // areaStyle: {
                //     type: 'default',
                //     color: 'rgba(240,240,240,1)'
                // },
                lineStyle: { color: "#E6A23C", type: "solid" },
                itemStyle: {
                  normal: {
                    borderWidth: 4,
                    color: "#E6A23C", // 会设置点和线的颜色，所以需要下面定制 line
                    borderColor: "#ffebee", // 点边线的颜色
                  },
                },
              },
              {
                name: "TSP",
                type: "line",
                stack: "总量",
                smooth: true,
                symbol: "circle",
                symbolSize: 8, //拐点圆的大小
                color: ["blue"], //折线条的颜色

                data: data4,
                // areaStyle: {
                //     type: 'default',
                //     color: 'rgba(240,240,240,1)'
                // },
                // lineStyle: { color: 'rgb(252, 20, 20)', type: 'dashed' },
                itemStyle: {
                  normal: {
                    borderWidth: 4,
                    color: "#409EFF", // 会设置点和线的颜色，所以需要下面定制 line
                    borderColor: "#ffebee", // 点边线的颜色
                  },
                },
              },
            ],
          };
          myChart3.setOption(options3);
          window.addEventListener("resize", function() {
            myChart3.resize();
          });
        })
        .catch(() => {});

      this.$axios
        .get(
          "https://v0.yiketianqi.com/api?version=v10&appid=29886216&appsecret=9zzGvRmJ&cityid=101220101"
        )
        .then((res) => {
          this.tianqi = res.data;

          this.tianqi.so2 = parseInt(this.tianqi.so2);
          this.analysis[5].number = res.data.so2 + "ug/m³";
          this.analysis[11].number = res.data.o3 + "ug/m³";
        })
        .catch(() => {});

      this.$api
        .EnvironmentFindEnvironment({
          user_id: localStorage.getItem("user_id"),
        })
        .then((res) => {
          this.analysis[0].number = res.data.data.pm10 + "ug/m³";
          this.analysis[1].number = res.data.data.pm25 + "ug/m³";
          this.analysis[2].number = res.data.data.tem + "℃";
          this.analysis[3].number = res.data.data.hum + "℃";
          this.analysis[4].tsp = res.data.data.tsp + "ug/m³";

          this.analysis[6].number = "--ug/m³";
          this.analysis[7].number = res.data.data.wp + "级";
          this.analysis[8].number = res.data.data.ws + "m/s";

          this.analysis[9].number = res.data.data.wd;
          this.analysis[10].number = res.data.data.atm + "kpa";
          this.analysis[14].number = res.data.data.noise + "db";
        })
        .catch((err) => {});
    },

    schart1() {
      this.$axios
        .get(
          "https://www.tianqiapi.com/api?version=v1&appid=29886216&appsecret=9zzGvRmJ&cityid=101220101"
        )
        .then((res) => {
          var data5 = res.data.data[0].air;
          var data6 = res.data.data[0].air_level;
          this.tq9 = res.data.data[0].air;
          this.tq3 = res.data.data[0].air_level;
          let myChart1 = echarts.init(document.getElementById("schart1"));
          let option1 = {
            title: {
              top: 20,
              left: "center",
              text: "空气质量指数",
              textStyle: {
                //  padding: 5,				// 提示框浮层的文本样式。...
                color: "#BDEDF4",
              },
            },
            // backgroundColor: "#000",
            tooltip: {
              // 本系列特定的 tooltip 设定。
              show: true,
              formatter: "{b}：{c}%",
              backgroundColor: "rgba(50,50,50,0.7)", // 提示框浮层的背景颜色。注意：series.tooltip 仅在 tooltip.trigger 为 'item' 时有效。
              borderColor: "#fff", // 提示框浮层的边框颜色。...
              borderWidth: 10, // 提示框浮层的边框宽。...
              padding: 25, // 提示框浮层内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距。...
              textStyle: {
                // 提示框浮层的文本样式。...
                // color ,fontStyle ,fontWeight ,fontFamily ,fontSize ,lineHeight ,.......
              },
            },

            series: [
              {
                name: "单仪表盘示例", // 系列名称,用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。
                type: "gauge", // 系列类型
                radius: "80%", // 参数:number, string。 仪表盘半径,默认 75% ，可以是相对于容器高宽中较小的一项的一半的百分比，也可以是绝对的数值。
                center: ["50%", "60%"], // 仪表盘位置(圆心坐标)
                startAngle: 225, // 仪表盘起始角度,默认 225。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。
                endAngle: -45, // 仪表盘结束角度,默认 -45
                clockwise: true, // 仪表盘刻度是否是顺时针增长,默认 true。
                min: 0, // 最小的数据值,默认 0 。映射到 minAngle。
                max: 400, // 最大的数据值,默认 100 。映射到 maxAngle。
                splitNumber: 10, // 仪表盘刻度的分割段数,默认 10。

                axisLine: {
                  // 仪表盘轴线(轮廓线)相关配置。
                  show: true, // 是否显示仪表盘轴线(轮廓线),默认 true。
                  lineStyle: {
                    // 仪表盘轴线样式。
                    color: [
                      [0.125, "#3EFF25"],
                      [0.25, "#E1FF22"],
                      [0.375, "#FFD228"],
                      [0.5, "#FFA337"],
                      [0.75, "#FF4B00"],
                      [1, "red"],
                    ], //仪表盘的轴线可以被分成不同颜色的多段。每段的  结束位置(范围是[0,1]) 和  颜色  可以通过一个数组来表示。默认取值：[[0.2, '#91c7ae'], [0.8, '#63869e'], [1, '#c23531']]
                    opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
                    width: 30, //轴线宽度,默认 30。
                    // shadowBlur: 20,				//(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
                    // shadowColor: "#ccc",		//阴影颜色。支持的格式同color。
                  },
                },

                splitLine: {
                  // 分隔线样式。
                  show: false, // 是否显示分隔线,默认 true。
                  length: 30, // 分隔线线长。支持相对半径的百分比,默认 30。
                  lineStyle: {
                    // 分隔线样式。
                    color: "#aaa", //线的颜色,默认 #eee。
                    opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
                    width: 2, //线度,默认 2。
                    type: "solid", //线的类型,默认 solid。 此外还有 dashed,dotted
                    shadowBlur: 10, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
                    shadowColor: "#ccc", //阴影颜色。支持的格式同color。
                  },
                },

                axisTick: {
                  // 刻度(线)样式。
                  show: true, // 是否显示刻度(线),默认 true。
                  splitNumber: 5, // 分隔线之间分割的刻度数,默认 5。
                  length: 8, // 刻度线长。支持相对半径的百分比,默认 8。
                  lineStyle: {
                    // 刻度线样式。
                    color: "#eee", //线的颜色,默认 #eee。
                    opacity: 1, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
                    width: 1, //线度,默认 1。
                    type: "solid", //线的类型,默认 solid。 此外还有 dashed,dotted
                    // // shadowBlur: 10,				//(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
                    // shadowColor: "#fff",		//阴影颜色。支持的格式同color。
                  },
                },

                axisLabel: {
                  // 刻度标签。
                  show: true, // 是否显示标签,默认 true。
                  distance: 5, // 标签与刻度线的距离,默认 5。
                  color: "#fff", // 文字的颜色,默认 #fff。
                  fontSize: 15, // 文字的字体大小,默认 5。
                  formatter: "{value}", // 刻度标签的内容格式器，支持字符串模板和回调函数两种形式。 示例:// 使用字符串模板，模板变量为刻度默认标签 {value},如:formatter: '{value} kg'; // 使用函数模板，函数参数分别为刻度数值,如formatter: function (value) {return value + 'km/h';}
                },

                pointer: {
                  // 仪表盘指针。
                  show: true, // 是否显示指针,默认 true。
                  length: "70%", // 指针长度，可以是绝对数值，也可以是相对于半径的百分比,默认 80%。
                  width: 5, // 指针宽度,默认 8。
                },

                itemStyle: {
                  // 仪表盘指针样式。
                  color: "auto", // 指针颜色，默认(auto)取数值所在的区间的颜色
                  opacity: 1, // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
                  borderWidth: 0, // 描边线宽,默认 0。为 0 时无描边。
                  borderType: "solid", // 柱条的描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'。
                  borderColor: "#000", // 图形的描边颜色,默认 "#000"。支持的颜色格式同 color，不支持回调函数。
                  // shadowBlur: 10,			// (发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
                  // shadowColor: "#fff",	// 阴影颜色。支持的格式同color。
                },

                title: {
                  // 仪表盘标题。
                  show: true, // 是否显示标题,默认 true。
                  offsetCenter: [0, "20%"], //相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
                  color: "#3EFF25", // 文字的颜色,默认 #333。
                  fontSize: 20,
                  fontWeight: 600, // 文字的字体大小,默认 15。
                },

                detail: {
                  // 仪表盘详情，用于显示数据。
                  show: true, // 是否显示详情,默认 true。
                  offsetCenter: [0, "50%"], // 相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
                  color: "auto", // 文字的颜色,默认 auto。
                  fontSize: 40, // 文字的字体大小,默认 15。
                  formatter: "{value}", // 格式化函数或者字符串
                },

                data: [
                  {
                    name: data6,
                    value: data5,
                  },
                ],
              },
            ],
          };

          myChart1.setOption(option1);
          window.addEventListener("resize", () => {
            myChart1.resize();
          });
        });
    },
  },
};
</script>
<style scoped>
.main {
  padding: 24px;
}

.title1 {
  color: #00f6ff;
  margin-bottom: 20px;
}

.redT {
  font-size: 12px;
  color: #e02727;
  margin-bottom: 10px;
}

.tit {
  font-size: 18px;
  color: #01f2ff;
  line-height: 80px;
  margin-left: 10px;
}

.text1 {
  font-size: 14px;
  color: #ffffff;
  vertical-align: top;
}

#schart1 {
  float: left;
  margin-left: 15px;
  width: 400px;
  height: 300px;
}

#schart0 {
  margin-top: 30px;
  margin-left: -80px;
  float: left;
  width: 200px;
  height: 250px;
  background: url(../../assets/img/title/you.png) no-repeat;
  background-size: 100% 100%;
}

.text2 {
  font-size: 16px;
  color: #00f6ff;
}

.bl1 {
  background: url("../../assets/img/title/bl2.webp") no-repeat;
  width: 1020px;
  height: 415px;
  display: inline-block;
  margin-right: 16px;
  margin-bottom: 16px;
  background-size: 1020px 415px;
  float: left;
}

.bl2 {
  background: url("../../assets/img/title/bl1.webp") no-repeat;
  width: 835px;
  height: 415px;
   background-size: 835px 415px;
  display: inline-block;
  margin-bottom:16px;
}

.blc {
  display: inline-block;
  /* margin-left: 20px; */
  margin-bottom: 60px;
  width: 160px;
}

.blc > img {
  margin: 0 16px;
}

.blc > div {
  display: inline-block;
}

.huanBaoR {
  width: 200px;
  float: right;
  margin-top: 40px;
  color: #ffffff;
}

.huanBaoRR {
  width: 200px;
  float: right;
  margin-top: 40px;
  color: #ffffff;
}
#schart3 {
  width: 970px;
  height: 300px;
}
.huanBaoR > div {
  width: 60px;
  display: inline-block;
  margin-right: 40px;
}
</style>
